<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Transmission下载器状态演示</title>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
  <style>
    body {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
      margin: 0;
      padding: 0;
      background-color: #f5f7fa;
    }
    .container {
      max-width: 1200px;
      margin: 0 auto;
      padding: 20px;
    }
    .header {
      text-align: center;
      margin-bottom: 30px;
    }
    .header h1 {
      color: #2c3e50;
      margin-bottom: 10px;
    }
    .header p {
      color: #7f8c8d;
      font-size: 18px;
    }
    .widgets-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
      gap: 20px;
      margin-bottom: 40px;
    }
    .widget-container {
      height: 400px;
      border-radius: 8px;
      overflow: hidden;
      box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
    }
    .widget-title {
      background-color: #fff;
      padding: 15px;
      border-bottom: 1px solid #eee;
      font-weight: 600;
      color: #2c3e50;
    }
    .controls {
      background-color: #fff;
      padding: 20px;
      border-radius: 8px;
      margin-bottom: 20px;
      box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
    }
    .controls h2 {
      color: #2c3e50;
      margin-top: 0;
    }
    .control-group {
      margin-bottom: 15px;
    }
    label {
      display: block;
      margin-bottom: 5px;
      font-weight: 500;
      color: #34495e;
    }
    input[type="range"] {
      width: 100%;
    }
    .value-display {
      display: inline-block;
      min-width: 60px;
      text-align: right;
      font-family: monospace;
      color: #16a085;
    }
    .button-group {
      margin-top: 20px;
      display: flex;
      gap: 10px;
    }
    button {
      padding: 8px 16px;
      background-color: #3498db;
      color: white;
      border: none;
      border-radius: 4px;
      cursor: pointer;
      font-weight: 500;
      transition: background-color 0.2s;
    }
    button:hover {
      background-color: #2980b9;
    }
    button.danger {
      background-color: #e74c3c;
    }
    button.danger:hover {
      background-color: #c0392b;
    }
    button.success {
      background-color: #2ecc71;
    }
    button.success:hover {
      background-color: #27ae60;
    }
  </style>
</head>
<body>
  <div class="container" id="app">
    <div class="header">
      <h1>Transmission下载器状态演示</h1>
      <p>这个演示页面展示了不同状态下的Transmission下载器组件</p>
    </div>
    
    <div class="controls">
      <h2>控制面板</h2>
      
      <div class="control-group">
        <label>下载速度: <span class="value-display">{{ formatSpeed(downloadSpeed) }}</span></label>
        <input type="range" v-model.number="downloadSpeed" min="0" max="20000000" step="100000">
      </div>
      
      <div class="control-group">
        <label>上传速度: <span class="value-display">{{ formatSpeed(uploadSpeed) }}</span></label>
        <input type="range" v-model.number="uploadSpeed" min="0" max="10000000" step="100000">
      </div>
      
      <div class="control-group">
        <label>活跃任务: <span class="value-display">{{ activeTorrents }}</span></label>
        <input type="range" v-model.number="activeTorrents" min="0" max="50" step="1">
      </div>
      
      <div class="control-group">
        <label>下载中任务: <span class="value-display">{{ activeDownloads }}</span></label>
        <input type="range" v-model.number="activeDownloads" min="0" max="20" step="1">
      </div>
      
      <div class="button-group">
        <button @click="toggleOnline" :class="{ success: isOnline }">
          {{ isOnline ? '设为离线' : '设为在线' }}
        </button>
        <button @click="resetValues">重置数值</button>
      </div>
    </div>
    
    <div class="widgets-grid">
      <div class="widget-container">
        <div class="widget-title">标准视图</div>
        <tr-status config-id="demo"></tr-status>
      </div>
      
      <div class="widget-container">
        <div class="widget-title">离线状态</div>
        <tr-status config-id="offline"></tr-status>
      </div>
      
      <div class="widget-container">
        <div class="widget-title">高速下载</div>
        <tr-status config-id="highspeed"></tr-status>
      </div>
      
      <div class="widget-container">
        <div class="widget-title">大量任务</div>
        <tr-status config-id="manytasks"></tr-status>
      </div>
    </div>
  </div>

  <script type="module">
    import TRStatus from './tr-status.vue'
    
    // 注册组件
    Vue.component('tr-status', TRStatus)
    
    // 创建Vue实例
    new Vue({
      el: '#app',
      data: {
        isOnline: true,
        downloadSpeed: 3500000, // 3.5 MB/s
        uploadSpeed: 1200000,   // 1.2 MB/s
        activeTorrents: 8,
        activeDownloads: 5,
        mockData: {
          standard: {
            name: 'Transmission演示',
            isOnline: true,
            downloadSpeed: 3500000, // 3.5 MB/s
            uploadSpeed: 1200000,   // 1.2 MB/s
            activeTorrents: 8,
            pausedTorrents: 3,
            completedTorrents: 15,
            totalTorrents: 26,
            activeDownloads: 5,
            globalRatio: 2.34,
            globalDownloaded: 1500000000000, // 1.5 TB
            globalUploaded: 3510000000000,   // 3.51 TB
            freeSpace: 250000000000,         // 250 GB
            seedingTorrents: 18,
            totalSize: 2000000000000,        // 2 TB
            averageRatio: 1.75,
            errorTorrents: 0,
            uploadLimit: 0,
            downloadLimit: 10485760          // 10 MB/s
          },
          offline: {
            name: 'Transmission离线',
            isOnline: false
          },
          highspeed: {
            name: 'Transmission高速',
            isOnline: true,
            downloadSpeed: 15000000, // 15 MB/s
            uploadSpeed: 5000000,    // 5 MB/s
            activeTorrents: 12,
            pausedTorrents: 5,
            completedTorrents: 30,
            totalTorrents: 47,
            activeDownloads: 10,
            globalRatio: 3.15,
            globalDownloaded: 5000000000000, // 5 TB
            globalUploaded: 15750000000000,  // 15.75 TB
            freeSpace: 500000000000,         // 500 GB
            seedingTorrents: 32,
            totalSize: 6000000000000,        // 6 TB
            averageRatio: 2.5,
            errorTorrents: 0,
            uploadLimit: 0,
            downloadLimit: 0
          },
          manytasks: {
            name: 'Transmission大量任务',
            isOnline: true,
            downloadSpeed: 8000000,  // 8 MB/s
            uploadSpeed: 3000000,    // 3 MB/s
            activeTorrents: 45,
            pausedTorrents: 20,
            completedTorrents: 120,
            totalTorrents: 185,
            activeDownloads: 15,
            globalRatio: 1.85,
            globalDownloaded: 12000000000000, // 12 TB
            globalUploaded: 22200000000000,   // 22.2 TB
            freeSpace: 100000000000,          // 100 GB
            seedingTorrents: 150,
            totalSize: 15000000000000,        // 15 TB
            averageRatio: 1.5,
            errorTorrents: 5,
            uploadLimit: 5242880,             // 5 MB/s
            downloadLimit: 10485760           // 10 MB/s
          }
        }
      },
      methods: {
        formatSpeed(bytesPerSecond) {
          const units = ['B/s', 'KB/s', 'MB/s', 'GB/s'];
          let value = bytesPerSecond;
          let unitIndex = 0;
          
          while (value >= 1024 && unitIndex < units.length - 1) {
            value /= 1024;
            unitIndex++;
          }
          
          return value.toFixed(2) + ' ' + units[unitIndex];
        },
        toggleOnline() {
          this.isOnline = !this.isOnline;
          this.updateMockData();
        },
        resetValues() {
          this.downloadSpeed = 3500000;
          this.uploadSpeed = 1200000;
          this.activeTorrents = 8;
          this.activeDownloads = 5;
          this.isOnline = true;
          this.updateMockData();
        },
        updateMockData() {
          // 更新标准视图的数据
          this.mockData.standard.isOnline = this.isOnline;
          this.mockData.standard.downloadSpeed = this.downloadSpeed;
          this.mockData.standard.uploadSpeed = this.uploadSpeed;
          this.mockData.standard.activeTorrents = this.activeTorrents;
          this.mockData.standard.activeDownloads = this.activeDownloads;
        }
      },
      watch: {
        downloadSpeed() {
          this.updateMockData();
        },
        uploadSpeed() {
          this.updateMockData();
        },
        activeTorrents() {
          this.updateMockData();
        },
        activeDownloads() {
          this.updateMockData();
        }
      },
      mounted() {
        // 模拟API请求
        const originalFetch = window.fetch;
        window.fetch = (url) => {
          if (url.includes('/api/widgets/tr-status/status/')) {
            return new Promise((resolve) => {
              setTimeout(() => {
                let data;
                
                if (url.includes('/demo')) {
                  data = this.mockData.standard;
                } else if (url.includes('/offline')) {
                  data = this.mockData.offline;
                } else if (url.includes('/highspeed')) {
                  data = this.mockData.highspeed;
                } else if (url.includes('/manytasks')) {
                  data = this.mockData.manytasks;
                } else {
                  data = this.mockData.standard;
                }
                
                resolve({
                  json: () => Promise.resolve(data)
                });
              }, 300);
            });
          }
          return originalFetch(url);
        };
      }
    });
  </script>
</body>
</html> 